<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4588818_ckhq99mzshn.css">
    <link rel="stylesheet" href="../css/zhuye.css">
    <link rel="stylesheet" href="../css/styles.css">
</head>

<body>
    <div class="dhl1">
        <div class="head">
            <!-- 头像 -->
            <div class="head-logo">
                <img src="./img/a.webp" alt="">
            </div>
            <!-- 名字 -->
            <div class="head-name">
                <a href="#">
                    <h3>第十组</h3>
                </a>
            </div>
            <!-- 搜索框 -->
            <div class="head-search">
                <div class="shell">
                    <input type="text"id="searchInput" placeholder="Search" >
                    <a href="#">
                        <img src="./img/fangdajing.png">
                    </a>
                </div>
            </div>
            <!-- 其他 -->
            <div class="head-other">
                <ul>
                    <li><a href="../../首页/HTML/╓≈╥│.html">首页</a></li>
                    <li><a href="../../kc/kc.html">课程</a></li>
                    <li><a href="../../论坛/新闻.html">论坛</a></li>
                    <li><a href="../../书籍/shuji.html">书籍</a></li>
                    <li><a href="../../我的主页/我的主页.html">我的</a></li>
                </ul>
            </div>
        </div>
        </div>
        <div class="dhl2">
        <div class="small">
            <img src="./img/small.png" width="45px" class="xlcdan">
            <div class="dhl2grxx">
                <img src="./img/a.webp">
                <p>第十组</p>
                </div>
              <div class="dhl2search">
                <input type="text" placeholder="Search" class="inputBox">
                <img src="./img/fangdajing.png" >
              </div>
        </div>
        <div class="dropDownMenu">
            <div class="xlcd2head">
                <ul>
                    <li><a href="../../首页/HTML/╓≈╥│.html">首页</a></li>
                    <li><a href="../../kc/kc.html">课程</a></li>
                    <li><a href="../../论坛/新闻.html">论坛</a></li>
                    <li><a href="../../书籍/shuji.html">书籍</a></li>
                    <li><a href="../../我的主页/我的主页.html">我的</a></li>
                </ul>
            </div>
        </div>
        </div>
    <div class="shujizongti">
        <div id="nav1">
            <p id="variety">书籍分类</p>
            <ul class="fenlei">
                <li class="slide-one"></li>
                <li class="slide-two"></li>
                <li class="leixing"><a href="../shuji.html" class="biaoqian">
                        <p class="type">HTML</p>
                    </a></li>
                <li class="leixing"><a href="./CSS.html" class="biaoqian">
                        <p class="type">CSS</p>
                    </a></li>
                <li class="leixing"><a href="./JavaScript.html" class="biaoqian">
                        <p class="type">JAVASCRIPT</p>
                    </a></li>
                <li class="leixing"><a href="./VUE.html" class="biaoqian">
                        <p class="type">VUE</p>
                    </a></li>
                <li class="leixing"><a href="./PYTHON.html" class="biaoqian">
                        <p class="type">PYTHON</p>
                    </a></li>
                <li class="leixing"><a href="./Java.html" class="biaoqian">
                        <p class="type">JAVA</p>
                    </a></li>
                <li class="leixing"><a href="./C.html" class="biaoqian">
                        <p class="type">C</p>
                    </a></li>
                <li class="leixing"><a href="./C++.html" class="biaoqian">
                        <p class="type">C++</p>
                    </a></li>
                <li class="leixing"><a href="./C11--.html" class="biaoqian">
                        <p class="type">C#</p>
                    </a></li>
                <li class="leixing"><a href="./GO.html" class="biaoqian">
                        <p class="type">GO</p>
                    </a></li>
                <li class="leixing"><a href="./SQL.html" class="biaoqian">
                        <p class="type">SQL</p>
                    </a></li>
                <li class="leixing"><a href="./LINUX.html" class="biaoqian">
                        <p class="type">LINUX</p>
                    </a></li>
                <li class="leixing"><a href="./JQUERY.html" class="biaoqian">
                        <p class="type">JQUERY</p>
                    </a></li>
            </ul>
        </div>
        <div class="books">
            <div class="bookcontainer one">
                <a href="https://fanqienovel.com/page/7109783404698143752?enter_from=search" class="bookname"
                    target="_blank"><img src="../images/C-1.jpg" alt="" class="cover"></a>
                <div class="zhengwen">
                    <h3 class="shuming">新编C语言程序设计教程</h3>
                    <span class="highlight-text">作者：钱雪忠 吕莹楠 高婷婷 主编</span><span class="span one">已完结 · 教育学习</span><span
                        class="span two">17.3万字
                        · 未满1000人在读</span>
                    <span class="span three">收藏数：99 点击数：1000+</span>
                    <p class="p four">
                        本书内容全面，重点突出，共含14章，主要内容包括：C语言概述、结构化程序设计与算法、数据类型及其运算、顺序结构程序设计、选择结构程序设计、循环结构程序设计、数组及其应用、函数及其应用、指针及其应用、自定义类型及其应用、文件及其应用、预处理命令、位运算、C语言应用案例等。</p>
                </div>
            </div>
            <div class="bookcontainer two">
                <a href="https://fanqienovel.com/page/7110094244668279822?enter_from=search" class="bookname"
                    target="_blank"><img src="../images/C-2.jpg" alt="" class="cover"></a>
                <div class="zhengwen">
                    <h3 class="shuming">C语言程序设计实例教程 第3版</h3>
                    <span class="highlight-text">作者：李红 陆建友</span><span class="span one">已完结 · 科学技术 计算机</span><span
                        class="span two">9.4万字 · 未满1000人在读</span>
                    <span class="span three">收藏数：96 点击数：1000+</span>
                    <p class="p four">
                        本书从实例出发引出各章节的知识点，主要介绍了C语言编程的基础知识和操作方法，帮助学生掌握使用Win-TC进行程序设计的方法。本书共分10章，内容主要涵盖了C语言基础知识、流程控制结构、数组、函数、指针、结构体、共用体、位运算、文件这几方面的知识。 本书以职业能力的培养为出发点，突出“以学生为中心”的教育理念，遵循“实例举例—知识点梳理—课堂精练—课后习题”的模式，重在全面培养学生的多元能力。本书还注重对上机调试程序能力的培养，结合企业软件开发时使用的一些底层函数讲解，各实例基本都配有课堂精练程序，各章设有实训和练习题（第10章除外），以达到巩固所学知识的目的。 本书适合作为高等职业院校“C语言程序设计”课程的教材，也可以作为C语言培训机构的培训教材以及C语言初学者的自学教材。
                    </p>
                </div>
            </div>
            <div class="bookcontainer three">
                <a href="https://fanqienovel.com/page/7110066931700337701?enter_from=search" class="bookname"
                    target="_blank"><img src="../images/C-3.jpg" alt="" class="cover"></a>
                <div class="zhengwen">
                    <h3 class="shuming">51单片机C语言编程一学就会</h3>
                    <span class="highlight-text">作者：何应俊</span><span class="span one">已完结 · 计算机</span><span
                        class="span two">6.7万字
                        · 未满1000人在读</span>
                    <span class="span three">收藏数：90 点击数：1000+</span>
                    <p class="p four">
                        本书以STC89C52（AT89S52）为例，介绍了51单片机的结构和特点、入门和提高所需的C语言知识，51单片机的输入/输出、定时器、中断、串行通信、A-D和D-A转换、交流和直流电动机及步进电动机的驱动。所有内容围绕着密切联系实际的典型应用（开发）示例而进行和展开。本书充分考虑初学者的特点，对程序可能存在的疑难点进行了详细解释。 本书适合单片机的初学者作自学教材，也适合职业院校电类专业作培训教材，还适合作中职单片机技能大赛的辅导用书。</p>
                </div>
            </div>
            <div class="bookcontainer four">
                <a href="https://fanqienovel.com/page/7106357482045312030?enter_from=search" class="bookname"
                    target="_blank"><img src="../images/html-4.jpg" alt="" class="cover"></a>
                <div class="zhengwen">
                    <h3 class="shuming">HTML+CSS+JavaScript网页制作 第2版</h3>
                    <span class="highlight-text">作者：刘瑞新 张兵义 等</span><span class="span one">已完结 · 教育教学</span><span
                        class="span two">10万字
                        · 未满1000人在读</span>
                    <span class="span three">收藏数：89 点击数：1000+</span>
                    <p class="p four">
                        本书面向网站开发与网页制作的读者，采用全新流行的Web标准，以HTML技术为基础，由浅入深、完整详细地介绍了HTML、CSS及JavaScript网页制作内容。本书内容紧扣国家对高职高专培养高级应用型、复合型人才的技能水平和知识结构的要求，以网络花店项目案例的开发思路为主线，采用模块分解、任务驱动、子任务实现和代码设计四层结构，通过对模块中每个任务相应知识点的讲解，引导读者学习网页制作、设计、规划的基本知识以及项目开发、测试的完整流程。
                    </p>
                </div>
            </div>
            <div class="bookcontainer five">
                <a href="https://fanqienovel.com/page/7106357482066283551?enter_from=search" class="bookname"
                    target="_blank"><img src="../images/html-5.jpg" alt="" class="cover"></a>
                <div class="zhengwen">
                    <h3 class="shuming">网页设计与制作教程（HTML+CSS+JavaScript） 第2版</h3>
                    <span class="highlight-text">作者：刘瑞新 张兵义 主编</span><span class="span one">已完结 · 计算机</span><span
                        class="span two">11.2万字
                        · 未满1000人在读</span>
                    <span class="span three">收藏数：89 点击数：1000+</span>
                    <p class="p four">
                        《Web开发技术——HTML、CSS、JavaScript》主要讲解了Web前端开发的相关知识，主要包括HTML、CSS和JavaScript等内容。在讲解理论知识的基础上，《Web开发技术——HTML、CSS、JavaScript》更加重视应用实践，分3个层次来强化学生的实际动手能力，包括每个知识点后的示例demo，每章后的综合应用实例，以及每个部分后的实际案例。本书配套提供所有的源代码。
                        《Web开发技术——HTML、CSS、JavaScript》从实用的角度出发，在设计案例、章节内容等方面，力求能够满足读者需求，使读者可以迅速理解并借鉴应用相关知识点。
                        《Web开发技术——HTML、CSS、JavaScript》既可作为高等学校Web开发基础课程的教材，也可作为Web开发人员的技术参考书。</p>
                </div>
            </div>
            <div class="pagination">
                <button id="prevPageBtn" disabled>上一页</button>
                <span id="pageInfo">第1页</span>
                <button id="nextPageBtn">下一页</button>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="../js/pagination.js"></script>
    <script src="../js/导航栏.js"></script>
    <script>
        $("#nav1 .biaoqian").on("click", function (e) {
            e.preventDefault(); // 阻止默认链接行为
            var $this = $(this);
            var position = $this.parent().position();
            var width = $this.parent().width();

            // 动画持续时间
            var DonghuaTime = 450;

            $("#nav1 .slide-one").css({ opacity: 1, top: position.top, width: width });

            // 动画结束后的跳转
            setTimeout(function () {
                window.location.href = $this.attr("href"); // 跳转到链接
            }, DonghuaTime);
        });

        // 初始设置slide-one的位置和宽度
        $(document).ready(function () {
            var currentWeight = $("#nav1 li:nth-of-type(9) a").parent("li").width();
            var current = $("#nav1 li:nth-of-type(9) a").parent("li").position();
            $("#nav1 .slide-one").css({ top: current.top, width: currentWeight, opacity: 1 }); // 初始设置就显示，不需要等待动画
        });
        </script>
</body>

</html>